<template>
	<view class="repair-wrap">
		<view style="padding-right: 20px;padding-bottom: 20px;padding-left: 20px;padding-top: 20px !important;">
			<!-- ////// -->
			<view class="u-flex u-row-between u-col-center u-m-b-20" style="background: #f9f9f9;padding: 7px 10px">

				<view style="display: flex; align-items: center;">
					<view style="width: 30px;height: 30px; display:flex;
					align-items: center;
					font-size: 22px;">
						<image v-if="detailData.release_type === 1" class="answer-cont-box-icon u-m-r--8"
							src="../../static/image/zxx.png"></image>
						<image v-if="detailData.release_type === 2" class="answer-cont-box-icon u-m-r--8"
							src="../../static/image/sxx.png"></image>
					</view>

					<view class="u-font-40 detaPro-clo1" style="font-weight: 700;font-size: 17px;line-height: 39px;">
						<span>
							{{detailData.release_type == 1?'出租':'出售'}}{{detailData.project_name}}
						</span>
					</view>
				</view>

				<view style="display: flex;font-size: 24px;" class="u-font-32 detaPro-clo2"
					v-if="detailData.release_type === 1">
					{{detailData.month_rent_money}}
					<view style="display: flex;font-size: 15px;margin-top: 8px;color: black;">
						元/月
					</view>

				</view>

				<view class="u-font-32 detaPro-clo2" v-if="detailData.release_type === 2">
					{{detailData.square_meter_price}}/平
				</view>
			</view>
			<view style="background: #F9F9F9;padding: 10px 8px;">
				<view class="u-m-b-20">
					<view class="u-font-22 detaPro-clo3" style="letter-spacing:2px;font-size: 16px;">
						<span class="OrangeVerticalPole"></span>
						<span>
							<span style="color: #000;margin-right: 4px;">{{detailData.house_types}}</span>
							|
							<span style="color: #000;margin-right: 4px;">{{detailData.built_area}}m<sup>2</sup></span>
							|
							<span
								style="color: #000;margin-right: 4px;">{{detailData.renovation === 1 ? '精装修' : detailData.renovation === 2 ? '普通装修' : '毛坯房'}}
							</span>
							|
							<span style="color: #000;margin-right: 4px;">{{detailData.payment_method}} </span>
						</span>
					</view>
				</view>
				<view class="u-m-b-20">
					<view class="u-font-22 detaPro-clo3" style="letter-spacing:2px;font-size: 16px;">
						<span class="OrangeVerticalPole"></span>
						<view v-for="item in detailData.orientation" style="display: contents;">
							<span
								style="color: #000;margin-right: 4px;">{{item === '1' ? '东' : item === '2' ? '南' : item === '3' ? '西' : '北'}}
							</span>
						</view>
						|
						<span
							style="color: #000;margin-right: 4px;">{{detailData.hearing_method === 1 ? '集体供暖' : detailData.hearing_method === 2 ? '自取暖':'无暖气'}}</span>
						|
						<span
							style="color: #000;margin-right: 4px;">{{detailData.elevator === 1 ? '有电梯' : '无电梯'}}</span>
						|
						<span style="color: #000;margin-right: 4px;"
							v-if="detailData.current_floor!=null&&detailData.total_floor!=null">
							{{detailData.current_floor!=null?detailData.current_floor.split('层')[0]:'1'}}/{{detailData.total_floor}}</span>
						{{detailData.current_floor!=null&&detailData.total_floor!=null?'|':''}}
					</view>
				</view>
				<view>
					<view class="u-font-22 detaPro-clo3" style="letter-spacing:2px;font-size: 14px;">
						{{detailData.position}}
						<image style="width: 32rpx;height: 32rpx;margin-left: 8rpx;position: absolute;margin-top: 4rpx;"
							@click="positionPopup = true" src="../../static/image/location.png" mode=""></image>
					</view>
					<view>
						<view style="font-size: 15px;color: #999999;font-weight: 200;float: right;margin-top: -18px;;">
							{{detailData.begin_time!=null?detailData.begin_time.split(' ')[0]:''}}
						</view>
					</view>
				</view>
			</view>

			<view v-show="indoorImages.length>0" style="margin-bottom: 35px;margin-top: 10px;">
				<u-swiper mode='none' bg-color='#fff' :effect3d="true" :list="indoorImages">
				</u-swiper>
			</view>

			<view
				style="margin-bottom: 30px;background:#f9f9f9;padding: 3px 5px;margin-top: -19px;box-shadow: 0 1px 5px #73727859;"
				v-if="detailData.supporting_facilities.length != 0">
				<view class="u-font-40 detaPro-clo1" style="font-weight: 550;font-size: 32rpx;margin-bottom: 10px;">
					配套设施
				</view>
				<view class="detaPro-clo3 pro-box-txt"
					style="text-indent: 0px;display: flex;margin: 8 auto;width: 98%;flex-wrap: wrap;">
					<view v-for="item in detailData.supporting_facilities" style="margin-left: 10px;">
						<view v-if="item === '1'">
							<image src="../../static/rensale/01.png" mode="" style="width: 35px;height: 35px;"></image>
							<view style="margin-left: 4px;font-size: 13px;margin-top: -5px;">冰箱</view>
						</view>
						<view v-if="item === '2'">
							<image src="../../static/rensale/02.png" mode="" style="width: 35px;height: 35px;"></image>
							<view style="margin-left: 4px;font-size: 13px;margin-top: -5px;">洗衣</view>
						</view>
						<view v-if="item === '3'">
							<image src="../../static/rensale/04.png" mode="" style="width: 35px;height: 35px;"></image>
							<view style="margin-left: 4px;font-size: 13px;margin-top: -5px;">空调</view>
						</view>
						<view v-if="item === '4'">
							<image src="../../static/rensale/05.png" mode="" style="width: 35px;height: 35px;"></image>
							<view style="margin-left: 4px;font-size: 13px;margin-top: -5px;">电视</view>
						</view>
						<view v-if="item === '5'">
							<image src="../../static/rensale/07.png" mode="" style="width: 35px;height: 35px;"></image>
							<view style="margin-left: 4px;font-size: 13px;margin-top: -5px;">沙发</view>
						</view>
						<view v-if="item === '6'">
							<image src="../../static/rensale/06.png" mode="" style="width: 35px;height: 35px;"></image>
							<view style="margin-left: 4px;font-size: 13px;margin-top: -5px;">衣柜</view>
						</view>
						<view v-if="item === '7'">
							<image src="../../static/rensale/03.png" mode="" style="width: 35px;height: 35px;"></image>
							<view style="margin-left: 4px;font-size: 13px;margin-top: -5px;">床铺</view>
						</view>
						<view v-if="item === '8'">
							<image src="../../static/rensale/09.png" mode="" style="width: 35px;height: 35px;"></image>
							<view style="margin-left: 4px;font-size: 13px;margin-top: -5px;">宽带</view>
						</view>
						<view v-if="item === '9'">
							<image src="../../static/rensale/10.png" mode="" style="width: 35px;height: 35px;"></image>
							<view style="margin-left: 4px;font-size: 13px;margin-top: -5px;">热水</view>
						</view>
						<view v-if="item === '10'">
							<image src="../../static/rensale/11.png" mode="" style="width: 35px;height: 35px;"></image>
							<view style="margin-left: 4px;font-size: 13px;margin-top: -5px;">天然气</view>
						</view>
					</view>
				</view>
			</view>
			<view style="background: #F9F9F9;padding: 11px 10px;margin-top: -14px;box-shadow: 0 1px 5px #73727859;">
				<view class="u-font-40 detaPro-clo1" style="font-weight: 550;font-size: 32rpx;">
					房屋介绍
				</view>
				<view class="u-m-t-10 detaPro-clo3 pro-box-txt">
					{{detailData.house_introduction}}
				</view>
			</view>
			<view style="background: #F9F9F9;padding: 11px 10px;margin-top: 16px;box-shadow: 0 1px 5px #73727859;">
				<view class="u-font-40 detaPro-clo1" style="font-weight: 550;font-size: 32rpx;">
					联系信息
				</view>
				<view style="padding: 15px 20px 6px;">
					<view style="margin-bottom: 15px;display: flex; align-items: center;">
						<image style="width: 15px;height: 15px;margin-right: 8px;margin-left: 10px;"
							src="../../static/image/contact.png" mode=""></image>
						<view style="font-size: 15px;font-weight: 700;">{{detailData.contact_name}}</view>
					</view>
					<view style="display: flex; align-items: center;">
						<image style="width: 15px;height: 15px;margin-right: 8px;margin-left: 10px;"
							src="../../static/image/tel.png" mode=""></image>
						<view style="font-size: 15px;font-weight: 700;">{{detailData.contact_number}}</view>
					</view>
				</view>
			</view>
			<!-- /////// -->

			<view style="margin-top: 25px;padding-bottom: 5px;" class="modal-bottom">
				<!-- <view v-if="detailData.release_type == 1">
					<button v-if="detailData.rent_state == 1" class="yilingqu" @click="handlerRentalButton(detailData.id)">出租</button>
					<button v-if="detailData.rent_state == 2" class="tuizu" @click="tuiZhu(detailData.id)">退租</button>
				</view> -->
				<button class="bianji" @click="edit(detailData.id)">编辑</button>
				<button class="xiaxian" @click="handlerOfflineButton(detailData.id)"
					v-if="detailData.rent_state != 3 && detailData.sell_state != 2">下线</button>
			</view>
			<view style="margin-top: 22px;margin-left: 20px;color: #999999;display: flex;">
				<view>提示：点击下线后，</view>
				<view style="color: blue;" @click='download()'>助业网</view>
				<view>将不会再进行推荐。</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				index: 0,
				array: ['分类', '分类二'],
				detailData: {
					supporting_facilities: [],
				},
				id: null,
				indoorImages: [],
			}
		},
		onLoad(options) {
			if (options.id) {
				this.getDetial(options.id)
			}
		},
		filters: {
			//取截单元,单位  zwl 2022-11-1
			moneyFormat: function(arg) {
				if (arg == null || arg == '') {
					return 0
				}
				if (arg.toString().length >= 13) {
					// return arg/1000000000000+"万亿"
					const moneys = arg / 1000000000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万亿"

				} else if (arg.toString().length >= 9) {
					const moneys = arg / 100000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "亿"
				} else if (arg.toString().length >= 5) {
					const moneys = arg / 10000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万"
				} else {
					return arg
				}
			}
		},
		methods: {
			getDetial(id) {
				var _this = this;
				this.$request.api.detail({
					id: id,
				}).then(res => {
					_this.detailData = res.data.data;
					if (_this.detailData && _this.detailData.indoor_imagess) {
						_this.detailData.indoor_imagess.split(',').forEach((item, index) => {
							_this.indoorImages.push({
								image: item
							})
						})
						console.log(_this.indoorImages)
					}
				})
			},
			//编辑 -- 跳转增加页面页面
			edit(id) {
				uni.navigateTo({
					url: '/pages/rentsale/release' + '?id=' + id
				})
			},
			navTo() {
				uni.navigateTo({
					url: '/pages/renovation/renovatiobdetails'
				})
			},
			imageBig(url) {
				uni.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				})
			},
			imageBig1(index) {
				console.log(index, '+++++++++++++++++')
				uni.previewImage({
					urls: this.detailData.indoor_images,
					current: index,
				})
			},
			//处理出租按钮
			handlerRentalButton(id) {
				if (id) {
					uni.navigateTo({
						url: '/pages/rentsale/information?id=' + id
					})
				}
			},

			//退租跳转弹窗跳页面填写信息根据id修改
			tuiZhu(id) {
				if (id) {
					uni.navigateTo({
						url: '/pages/rentsale/rentwithdrawal?id=' + id
					})
				}
			},

			//下载助业网
			download() {
				console.log('点击下载')
				// #ifdef APP-PLUS
				var name = "uni.UNI21DD88C"; //助业网 app
				let appurl = "market://details?id=" + name;
				plus.runtime.openURL(appurl); //该代码仅在app中生效
				// #endif
				// #ifdef H5
				uni.request({
					url: 'https://admin.515f.com/api/rest/v1/venusSysAppUpgradeService/getNewAppInfoByType',
					method: 'POST',
					data: {
						app_type: 0
					},
					success: res => {
						this.info = res.data.data;
						window.location.href = this.info.wgt_link;
						// location.href = this.info.android_link;
					}
				})
				//该代码仅在h5中生效
				// #endif
			},

			// //处理退租按钮
			// handlerRuntalButton(id){
			// 	if(id){
			// 		this.$request.api.rettal({
			// 			id:id,
			// 			rent_state:1
			// 		}).then(res =>{
			// 			if(res.data.code === 0){
			// 				uni.showToast({
			// 				    title: '退租成功，状态改为未租！',
			// 				    icon:'success'
			// 				});
			// 				this.getDetial(id);
			// 			}else{
			// 				uni.showToast({
			// 				    title: '退租失败系统繁忙！',
			// 				    icon:'error'
			// 				});
			// 			}
			// 		})
			// 	}
			// },
			//处理下线按钮
			handlerOfflineButton(id) {
				if (id) {
					this.$request.api.rettal({
						id: id,
						offline: 'dsa'
					}).then(res => {
						if (res.data.code === 0) {
							uni.showToast({
								title: '下线成功！',
								icon: 'success'
							});
							this.getDetial(id);
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/user/user'
								})
							}, 200)
						} else {
							uni.showToast({
								title: '下线失败系统繁忙！',
								icon: 'error'
							});
						}
					})
				}
			}
		}
	}
</script>


<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #ffffff;
		overflow: hidden;
	}

	.modal-bottom {
		width: 100%;
		height: 84rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		// background:#F9A832;
		// background-color: #F9A832;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}

	.bianji {
		width: 40%;
		height: 84rpx;
		background: linear-gradient(270deg, #87cefa 0%, #00bfff 53%, #578EF0 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #ffffff;
		text-align: center;
		font-size: 32rpx;
		margin-top: 15px;
	}

	.xiaxian {
		width: 40%;
		height: 84rpx;
		border: 1px solid #CCCCCCFF;
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #333333FF;
		text-align: center;
		font-size: 32rpx;
		margin-top: 15px;
	}

	.tuizu {
		width: 80%;
		height: 84rpx;
		border: 1px solid #F55959FF;
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #F55959FF;
		text-align: center;
		font-size: 32rpx;
		margin-top: 15px;
	}

	// 
	.answer-cont-box-icon {
		width: 42rpx;
		height: 42rpx;
		margin-right: 8rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.detaPro-clo1 {
		color: #000;
	}

	.detaPro-clo2 {
		color: #ffa000;
	}

	.detaPro-clo3 {
		color: #999999;
	}

	.OrangeVerticalPole {
		width: 6px;
		height: 16px;
		background-color: #1E90FF;
		border-radius: 4px;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10px;
		margin-top: -5px;
	}

	.pro-box-txt {
		line-height: 40rpx;
		text-indent: 50rpx;
		text-align: center;
	}
</style>